<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery超酷的层叠照片墙DEMO演示</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
<link rel="stylesheet" type="text/css" href="css/base.css"><!--演示页面样式，使用时可以不引用-->

<!--必要样式-->
<link href="css/photopile.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">

</head>
<body>

<div class="photopile-wrapper">
	<ul class="photopile">
		<li>
			<a href="images/fullsize/01.jpg">
			<img src="images/thumbs/01.jpg" alt="Barton Dam, Ann Arbor, Michigan" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/02.jpg">
			<img src="images/thumbs/02.jpg" alt="Building Atlanta, Georgia" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/03.jpg">
			<img src="images/thumbs/03.jpg" alt="Nice day for a swim" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/04.jpg">
			<img src="images/thumbs/04.jpg" alt="The plants that never die" width="100" height="133" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/05.jpg">
			<img src="images/thumbs/05.jpg" alt="Downtown Atlanta, Georgia" width="100" height="134" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/06.jpg">
			<img src="images/thumbs/06.jpg" alt="Atlanta traffic" width="100" height="137" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/07.jpg">
			<img src="images/thumbs/07.jpg" alt="A pathetic dog" width="120" height="120" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/08.jpg">
			<img src="images/thumbs/08.jpg" alt="Two happy dogs" width="140" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/09.jpg">
			<img src="images/thumbs/09.jpg" alt="Antigua, Guatemala" width="100" height="133" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/10.jpg">
			<img src="images/thumbs/10.jpg" alt="Iximche, Guatemala" width="135" height="128" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/11.jpg">
			<img src="images/thumbs/11.jpg" alt="The bat cave" width="119" height="133" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/12.jpg">
			<img src="images/thumbs/12.jpg" alt="All Saints Day Kite Festival" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/13.jpg">
			<img src="images/thumbs/13.jpg" alt="Tikal, Guatemala" width="130" height="130" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/14.jpg">
			<img src="images/thumbs/14.jpg" alt="Mackinac Island, Michigan" width="111" height="130" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/15.jpg">
			<img src="images/thumbs/15.jpg" alt="Summer flowers" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/16.jpg">
			<img src="images/thumbs/16.jpg" alt="Full of hot air" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/17.jpg">
			<img src="images/thumbs/17.jpg" alt="On the rise" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/18.jpg">
			<img src="images/thumbs/18.jpg" alt="Amador Causeway, Panama City" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/19.jpg">
			<img src="images/thumbs/19.jpg" alt="The Panama Canal" width="140" height="79" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/20.jpg">
			<img src="images/thumbs/20.jpg" alt="Flags over Brussels" width="133" height="99" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/21.jpg">
			<img src="images/thumbs/21.jpg" alt="Eiffel Tower" width="100" height="134" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/22.jpg">
			<img src="images/thumbs/22.jpg" alt="Never-ending stairs" width="99" height="133" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/23.jpg">
			<img src="images/thumbs/23.jpg" alt="Paris, France" width="140" height="93" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/24.jpg">
			<img src="images/thumbs/24.jpg" alt="Rainbow over Belgium" width="136" height="98" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/25.jpg">
			<img src="images/thumbs/25.jpg" alt="Playa del Carmen" width="136" height="96" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/26.jpg">
			<img src="images/thumbs/26.jpg" alt="Panama City, Panama" width="133" height="96" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/27.jpg">
			<img src="images/thumbs/27.jpg" alt="Red frog" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/28.jpg">
			<img src="images/thumbs/28.jpg" alt="Dogs on a couch" width="133" height="99" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/29.jpg">
			<img src="images/thumbs/29.jpg" alt="Tarantula" width="133" height="97" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/30.jpg">
			<img src="images/thumbs/30.jpg" alt="Ceviche Loco" width="140" height="93" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/31.jpg">
			<img src="images/thumbs/31.jpg" alt="Playa Blanca, Panama" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/32.jpg">
			<img src="images/thumbs/32.jpg" alt="Pickles" width="133" height="99" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/33.jpg">
			<img src="images/thumbs/33.jpg" alt="Parrot" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/34.jpg">
			<img src="images/thumbs/34.jpg" alt="Panama rains" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/35.jpg">
			<img src="images/thumbs/35.jpg" alt="Cinta Costera, Panama City" width="120" height="120" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/36.jpg">
			<img src="images/thumbs/36.jpg" alt="Afternoon stroll" width="133" height="100" />
			</a>
		</li>
		<li>
			<a href="images/fullsize/37.jpg">
			<img src="images/thumbs/37.jpg" alt="Overlooking the Panama Canal" width="138" height="94" />
			</a>
		</li>
	</ul>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/photopile.js"></script>
<script type="text/javascript">
$(function(){
	PhotoPile().scatter();
});
</script>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>